---
import { getCollection } from "astro:content";
import MainLayout from "~/layouts/MainLayout.astro";
import BackButton from "../components/BackButton.astro";

const bookmarks = await getCollection("bookmarks");
const sortedBookmarks = bookmarks.sort((a, b) => (a.data.date > b.data.date ? -1 : 1));
const renderedBookmarks = await Promise.all(sortedBookmarks.map(async (bookmark) => {
	const { Content } = await bookmark.render();
	return { ...bookmark.data, Content };
}));
---

<MainLayout seo={{ title: "Bookmarks" }}>
	<section class="mx-auto max-w-[920px] px-4 py-10">
		<BackButton />
		<h1
			class="font-serif relative inline-block text-xl md:text-3xl font-bold text-pink-950 mt-4"
		>
			书签 / 今日所学
		</h1>
		<p class="text-sm md:text-base font-serif text-pink-950/70 pt-2 pb-4">
			嗯，看起来你找到了这个不是那么秘密的页面 :) <br> 这里是我保存书签或所学内容的地方。这是一份我感兴趣和觉得有用的东西的公共存档，无论是文章、随想、视频，还是任何其他东西。希望你也能在这里找到一些有用的东西！
		</p>
		<div class="py-4 border-t border-pink-300 border-dashed flex flex-col gap-8">
			{renderedBookmarks.map((bookmark) => (
				<div>
					<div
						class="relative flex items-center min-h-9 p-2 leading-none bg-pink-300/30 rounded-sm"
					>
						<div class="absolute top-0 -left-5 w-4 h-4 bg-sky-300/50 rounded-sm" />
						<div class="absolute top-5 -left-5 w-4 h-4 bg-yellow-300/50 rounded-sm" />
						<h2 class="text-lg md:text-xl font-bold font-serif text-pink-950">{bookmark.title}</h2>
					</div>
					<div class="text-sm md:text-base font-serif text-pink-950 prose -my-2 max-w-full">
						<bookmark.Content />
					</div>
					{bookmark.url !== null && (
						<a
							href={bookmark.url}
							target="_blank"
							rel="noopener noreferrer"
							class="font-mono text-pink-950 text-xs md:text-sm underline"
						>
							{bookmark.url}
						</a>
					)}
				</div>
			))}
		</div>
	</section>
</MainLayout>
